<template>
	<view style="padding: 20rpx 32rpx;">
		
		
		<view class="info-card product-info" v-if="productInfo.classify == 2">
			<view class="address_box">
				<image src='@/static/images/pay/map.png'></image>
				<view class="address_info_box">
					<view class="name">{{ orderInfo.realName }}<text>{{ orderInfo.userPhone }}</text></view>
					<view class="info">{{ orderInfo.userAddress }}</view>
				</view>
			</view>
		</view>
		
		
		<view class="info-card product-info" v-if="productInfo.classify == 1">
			<view class="card-title">商品权益</view>
			
			<view class="goods-status-f">
				<view class="item">
					<image src='@/static/images/pay/i_1.png'></image>
					<view class="goods_text_info">
						<text>短剧数量</text>
						<text>{{ productInfo.playletNum }}</text>
					</view>
				</view>
				<view class="item">
					<image src='@/static/images/pay/i_2.png'></image>
					<view class="goods_text_info">
						<text>视频数量</text>
						<text>{{ productInfo.videoNum }}</text>
					</view>
				</view>
				<view class="item">
					<image src='@/static/images/pay/i_3.png'></image>
					<view class="goods_text_info">
						<text>修改次数</text>
						<text>{{ productInfo.editNum }}</text>
					</view>
				</view>
				<view class="item">
					<image src='@/static/images/pay/i_4.png'></image>
					<view class="goods_text_info">
						<text>删除次数</text>
						<text>{{ productInfo.delNum }}</text>
					</view>
				</view>
			</view>
		</view>	
		
		
		
		<!-- 商品信息 -->
		<view class="info-card product-info" style="padding-bottom: 0;">
			<view class="product-content">
				<view class="product-image-box">
					<image :src="productInfo.img" mode="aspectFill" class="product-image"></image>
				</view>
				<view class="product-details">
					<view class="product-name">{{ productInfo.title }}</view>
					<view class="product-intr">{{ productInfo.describeText }}</view>
					<view class="product-quantity">¥{{ productInfo.goodsPrice }}</view>
				</view>
			</view>
			<view class="pay_item_box">
				<text>运费金额：</text>
				<text>¥{{ orderInfo.freightPrice }}</text>
			</view>
			<view class="pay_item_box">
				<text>支付总金额：</text>
				<text style="color: #FD7885;">¥{{ orderInfo.payMoney }}</text>
			</view>
		</view>
		
		
		<!-- 下单人信息 -->
		<view class="info-card user-info">
			<view class="card-title">下单人信息</view>
			<view class="info-content">
				<view class="info-row">
					<text class="label">用户姓名：</text>
					<text>{{ userInfo.userName }}</text>
				</view>
				<view class="info-row">
					<text class="label">手机号码：</text>
					<text>{{ userInfo.phone }}</text>
				</view>
				<view class="info-row">
					<text class="label">下单时间：</text>
					<text>{{ orderInfo.createTime }}</text>
				</view>
			<!-- 	<view class="info-row">
					<text class="label">运费金额：</text>
					<text>{{ orderInfo.freightPrice }} 元</text>
				</view> -->
				<view class="info-row">
					<text class="label">订单编号：</text>
					<text>{{ orderInfo.ordersNo }}</text>
					<view class="copy-btn" @click="copyOrderNo">复制</view>
				</view>
				<!-- <view class="info-row">
					<text class="label">支付总金额：</text>
					<text style="color: red;">{{ orderInfo.payMoney }} 元</text>
				</view> -->
			</view>
		</view>

	

		


		

		<view class="info-card product-info" v-if="productInfo.classify == 2 && orderInfo.deliveryState > 1">
			<view class="card-title">寄件信息</view>
			<!-- 新增商品状态展示 -->
			<view class="info-content">
				<view class="info-row">
					<text class="label">寄件编号：</text>
					<text>{{ orderInfo.deliveryId }}</text>
					<view class="copy-btn" @click="copyDeliveryId">复制</view>
				</view>
				<view class="info-row">
					<text class="label">寄件人姓名：</text>
					<text>{{ orderInfo.deliveryName }}</text>
				</view>
			</view>
		</view>

		<view class="footer-btn">
			<view class="btn-group">
				<view class="usermain-btn" @click="messagebtn2()" v-if="orderInfo.deliveryState === 2">确认收货</view>
			</view>
		</view>
	</view>

</template>

<script>
import configdata from '../../../common/config.js';
export default {
	data() {
		return {
			id: null,
			userInfo: {},
			productInfo: {},
			orderInfo: {},
		};
	},
	onLoad(e) {
		this.id = e.ordersId
		uni.setNavigationBarTitle({
			title: '订单详情'
		});
		this.getOrderInfo(this.id)
	},
	methods: {

		//放大图片
		previewImage(e, url) {
			uni.previewImage({
				urls: url,
				current: e
			});
		},

		// 资源详情 获取
		getOrderInfo(id) {
			this.$u.get("/app/spreader/getSpreadOrderInfo?orderId=" + id).then(
				res => {
					if (res.code === 0) {
						this.userInfo = res.userInfo
						this.productInfo = res.productInfo
						this.orderInfo = res.orderInfo
					}
				});
		},
		// titleImg
		onChooseTitleImg(e) {
			let that = this;
			let url = ''
			let token = uni.getStorageSync('token');
			uni.showLoading({
				title: '上传中...'
			});
			uni.uploadFile({
				url: configdata.APIHOST + '/alioss/upload',
				filePath: e.detail.avatarUrl,
				header: {
					token: token
				},
				name: 'file',
				success: uploadFileRes => {
					url = JSON.parse(uploadFileRes.data);
					that.titleImg = url.data
					uni.hideLoading();
				}
			});

		},
		// titleImg
		onChooseImg(e) {
			let that = this;
			let url = ''
			let token = uni.getStorageSync('token');
			uni.showLoading({
				title: '上传中...'
			});
			uni.uploadFile({
				url: configdata.APIHOST + '/alioss/upload',
				filePath: e.detail.avatarUrl,
				header: {
					token: token
				},
				name: 'file',
				success: uploadFileRes => {
					url = JSON.parse(uploadFileRes.data);
					that.titleImg = url.data
					uni.hideLoading();
				}
			});

		},
		// bannerImg
		onChooseBannerImg(e) {
			let that = this;
			let url = ''
			let token = uni.getStorageSync('token');
			uni.showLoading({
				title: '上传中...'
			});
			uni.uploadFile({
				url: configdata.APIHOST + '/alioss/upload',
				filePath: e.detail.avatarUrl,
				header: {
					token: token
				},
				name: 'file',
				success: uploadFileRes => {
					url = JSON.parse(uploadFileRes.data);
					that.bannerImg.push(url.data)
					uni.hideLoading();
				}
			});

		},
		uploadImgTitleImg() {
			let token = uni.getStorageSync('token')

			if (!token) {
				this.goLoginInfo();
				return;
			}
			let that = this;
			var url = null;
			uni.showActionSheet({
				// itemList按钮的文字接受的是数组
				itemList: ["从相册选择图片"],
				success(e) {
					var index = e.tapIndex
					uni.chooseImage({
						count: 1, //默认9
						sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
						sourceType: ['album'], //从相册选择
						success: function (res) {
							uni.showLoading({
								title: '上传中...'
							});
							let token = uni.getStorageSync('token');
							let userId = uni.getStorageSync('userId');
							uni.uploadFile({
								url: configdata.APIHOST + '/alioss/upload',
								filePath: res.tempFilePaths[0],
								name: 'file',
								success: uploadFileRes => {
									url = JSON.parse(uploadFileRes.data);
									console.log(url)
									that.orderInfo.questProgressPic = url.data
								}
							});
						}
					});
				}
			})
		},
		uploadImgImg() {
			let token = uni.getStorageSync('token')

			if (!token) {
				this.goLoginInfo();
				return;
			}
			let that = this;
			var url = null;
			uni.showActionSheet({
				// itemList按钮的文字接受的是数组
				itemList: ["从相册选择图片"],
				success(e) {
					var index = e.tapIndex
					uni.chooseImage({
						count: 1, //默认9
						sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
						sourceType: ['album'], //从相册选择
						success: function (res) {
							uni.showLoading({
								title: '上传中...'
							});
							let token = uni.getStorageSync('token');
							let userId = uni.getStorageSync('userId');
							uni.uploadFile({
								url: configdata.APIHOST + '/alioss/upload',
								filePath: res.tempFilePaths[0],
								name: 'file',
								success: uploadFileRes => {
									url = JSON.parse(uploadFileRes.data);
									console.log(url)
									that.img = url.data
								}
							});
						}
					});
				}
			})
		},
		config: function (name) {
			var info = null;
			if (name) {
				var name2 = name.split("."); //字符分割
				if (name2.length > 1) {
					info = configdata[name2[0]][name2[1]] || null;
				} else {
					info = configdata[name] || null;
				}
				if (info == null) {
					let web_config = cache.get("web_config");
					if (web_config) {
						if (name2.length > 1) {
							info = web_config[name2[0]][name2[1]] || null;
						} else {
							info = web_config[name] || null;
						}
					}
				}
			}
			return info;
		},
		// 保存
		messagebtn2() {
			if (this.orderInfo.deliveryState != 2) {
				uni.showToast({
					title: "当前状态无法确认完成",
					icon: "none"
				})
				return
			}
			var that = this
			uni.showModal({
				title: '温馨提示',
				content: '确定完成当前订单信息',
				confirmColor: '#8B8FF0',
				success: e => {
					if (e.confirm) {
						var data = {
							ordersId: this.orderInfo.ordersId
						}
						this.$u.post("/app/shop/addConfirmation", data).then(res => {
							if (res.code === 0) {
								uni.showToast({
									title: '提交成功',
									icon: "none"
								})
								setTimeout(function () {
									uni.navigateBack()
								}, 1000)
							} else {
								uni.showToast({
									title: res.msg,
									icon: "none"
								})
							}
						});
					}
				}
			});
		},
		cancelBtn() {
			uni.navigateBack()
		},
		copyDeliveryId() {
			// #ifdef H5
			const input = document.createElement('input');
			input.setAttribute('readonly', 'readonly');
			input.setAttribute('value', this.orderInfo.deliveryId);
			document.body.appendChild(input);
			input.select();
			document.execCommand('copy');
			document.body.removeChild(input);
			// #endif
			
			// #ifdef APP-PLUS
			uni.setClipboardData({
				data: this.orderInfo.deliveryId,
				success: () => {
					uni.showToast({
						title: '复制成功',
						icon: 'none'
					});
				}
			});
			// #endif
			
			uni.showToast({
				title: '复制成功',
				icon: 'none'
			});
		},
		copyOrderNo() {
			// #ifdef H5
			const input = document.createElement('input');
			input.setAttribute('readonly', 'readonly');
			input.setAttribute('value', this.orderInfo.ordersNo);
			document.body.appendChild(input);
			input.select();
			document.execCommand('copy');
			document.body.removeChild(input);
			// #endif
			
			// #ifdef APP-PLUS
			uni.setClipboardData({
				data: this.orderInfo.ordersNo,
				success: () => {
					uni.showToast({
						title: '复制成功',
						icon: 'none'
					});
				}
			});
			// #endif
			
			uni.showToast({
				title: '复制成功',
				icon: 'none'
			});
		}
	}
};
</script>

<style  lang="scss">
	
	.address_box{
		display: flex;
		align-items: center;
		image{
			width: 64rpx;
			height: 64rpx;
			margin-right: 16rpx;
		}
		.address_info_box{
			.name{
				font-weight: 500;
				font-size: 28rpx;
				color: #1A1A1A;
				text{
					font-weight: 500;
					font-size: 24rpx;
					color: #999999;
					padding-left: 8rpx;
				}
			}
			.info{
				font-weight: 500;
				font-size: 22rpx;
				color: #1A1A1A;
				padding-top: 12prx;
			}
		}
	}
	.pay_item_box{
		height: 87rpx;
		border-top: 1px solid #EDEDED;
		display: flex;
		align-items: center;
		justify-content: space-between;
		text{
			&:nth-child(1){
				font-weight: 500;
				font-size: 24rpx;
				color: #999999;
			}
			&:nth-child(2){
				font-weight: bold;
				font-size: 24rpx;
				color: #333333;
			}
		}
	}
	.goods-status-f{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		.item{
			width: 315rpx;
			height: 104rpx;
			background: linear-gradient(180deg, #FEFAE8, #FDFBF7);
			border-radius: 10rpx;
			display: flex;
			align-items: center;
			padding-left: 20rpx;
			&:nth-child(1){
				margin-bottom: 20rpx;
			}
			&:nth-child(2){
				margin-bottom: 20rpx;
			}
			image{
				width: 64rpx;
				height: 64rpx;
				margin-right: 19rpx;
			}
			.goods_text_info{
				display: flex;
				flex-direction: column;
				text{
					&:nth-child(1){
						font-weight: 500;
						font-size: 24rpx;
						color: #D4A76B;
					}
					&:nth-child(2){
						font-weight: bold;
						font-size: 30rpx;
						color: #705637;
					}
				}
			}
		}
	}
.goods-status {
	background: #fff;
	padding: 20rpx 30rpx;
	display: flex;
	justify-content: space-between;
	margin-bottom: 20rpx;

	.status-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		flex: 1;
		position: relative;

		&:not(:last-child)::after {
			content: '';
			position: absolute;
			right: 0;
			top: 50%;
			transform: translateY(-50%);
			height: 70%;
			width: 1px;
			background-color: #eee;
		}

		.status-label {
			font-size: 24rpx;
			color: #999;
			margin-bottom: 10rpx;
		}

		.status-value {
			font-size: 28rpx;
			color: #333;
		}
	}
}

page {
	background: #F7F8FF;
}

button::after {
	border: none;
	background-color: none;
}

button {
	position: relative;
	display: block;
	margin-left: auto;
	margin-right: auto;
	padding-left: 0px;
	padding-right: 0px;
	box-sizing: border-box;
	text-decoration: none;
	line-height: 1.35;
	overflow: hidden;
	color: #666666;
	/* background-color: #fff; */
	background-color: rgba(255, 255, 255, 0) !important;
	width: 100%;
	height: 100%;
}

.usermain {
	background: #FFFFFF;
}

.usermain-item {
	display: flex;
	align-items: center;
	margin-left: 40rpx;
	padding: 30rpx 40rpx 30rpx 0;
	justify-content: space-between;
	/* border-bottom: 2rpx solid #f2f2f2; */
}

.usermain-item.item-padding {
	padding: 10rpx 40rpx 10rpx 0;
}

.valuscss {
	width: 80%;
}

.cu-form-group {
	padding: 0;
	background: #FFFFFF;
	/* text-align: right; */
}

.cu-form-group input {
	background: #FFFFFF;
	font-size: 28rpx;
	color: #333333;

}

.footer-btn {
	margin-top: 40rpx;
	padding: 0 32rpx;
}

.btn-group {
	display: flex;
	justify-content: flex-end;
	gap: 20rpx;
}

.footer-btn .usermain-btn {
	color: #FFFFFF;
	background: linear-gradient(90deg, #ff7581, #f8a5af);
	text-align: center;
	width: 200rpx;
	height: 80rpx;
	font-size: 28rpx;
	line-height: 80rpx;
	border-radius: 40rpx;
}

.footer-btn .cancel-btn {
	background: linear-gradient(90deg, #999999, #666666);
}

.label_text {
	width: 240rpx;
}

.info-card {
	background: #fff;
	border-radius: 10rpx;
	padding: 20rpx;
	margin-bottom: 20rpx;
}

.card-title {
	font-weight: bold;
	font-size: 30rpx;
	color: #333333;
	padding:6rpx 0 26rpx 0 ;
}

.info-content {

}

.info-row {
	display: flex;
	margin-bottom: 10rpx;
	position: relative;
	text{
		&:nth-child(2){
			font-weight: 500;
			font-size: 24rpx;
			color: #333333;
		}
	}
}

.label {
	font-weight: 500;
	font-size: 24rpx;
	color: #999999;
}

.product-content {
	display: flex;
	// align-items: center;
	padding-bottom: 30rpx;
	position: relative;
}


.product-image-box{
	width: 140rpx;
	height: 140rpx;
	background: #F7F7F7;
	border-radius: 10rpx;
	margin-right: 16rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}
.product-image {
	width: 117rpx;
	height: 117rpx;
}

.product-details {
	flex: 1;
}

.product-name {
	font-weight: bold;
	font-size: 28rpx;
	color: #1A1A1A;
}
.product-intr{
	font-weight: 500;
	font-size: 24rpx;
	color: #999999;
	padding-top: 10rpx;
}
.product-quantity {
	font-weight: bold;
	font-size: 24rpx;
	color: #333333;
	position: absolute;
	right: 0;
	bottom: 30rpx;
}

.upload-btn {
	width: 111rpx;
	height: 111rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #f5f5f5;
	border-radius: 8rpx;
}

.upload-btn image {
	width: 111rpx;
	height: 111rpx;
}

.copy-btn {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	background: #FD7885;
	color: #fff;
	font-size: 20rpx;
	padding: 0 16rpx;
	border-radius: 40rpx;
	height: 40rpx;
	line-height: 40rpx;
}
</style>